let questionApp = new Vue({
    //属性名是固定的，字不要写错了
    el:"#questionApp",  //第190行左右
    data:{
        questions:[] ,    //定义一个数组，数组名是questions
        pageInfo: { }     //用来接收后端返回的分页查询结果对象
    },
    methods:{
        //更新问题的图片
        updateImage:function (){
            let questions = this.questions;
            for( let i=0;i<questions.length;i++){
                let tags = questions[i].tags;
                //图片使用第一个标签关联的图片
                // JS 里的 if 在值 null，undifined, 0, false , "" 时返回false, 除了上面情况都为 true .
                // 只要 tags 里有内容，就为 true
                if(tags){
                    let tagImage = "/img/tags/" + (tags[0].id - 20 ) +".jpg" ;
                    console.log( "tagImage : " + tagImage ) ;
                    // 把局部变量赋值给 question 实例变量中。
                    questions[i].tagImage = tagImage ;
                }
            }
        },

        // 声明式函数： 定义并不代表执行。需要被调用 ！什么时候调用，在哪调用 ？

        updateDuration:function () {
            let questions = this.questions;
            for(let i=0 ; i < questions.length ; i++){
                addDuration( questions[i] );
            }
        },




        // 以前是页面加载完成自动调用。现在除了自动调用，再添加一个此方法的调用事件。
        // 加载问题列表的方法, 给参数的位置添加 pageNum 页码。
        loadQuestions:function( pageNum ){
            console.log("loadQuestions is running.. " + pageNum )
            //只有第一次页面加载时，初始化 pageNum.
            //后面通过控件元素调用此方法时， pageNum 都有值。
            if( !pageNum ){
                pageNum = 1 ;
            }

            $.ajax({
                url:"/questions/teacher",
                method:"GET" ,
                // 发送 AJAX 请求携带的参数： /question/my?pageNum=1
                data: {
                    pageNum: pageNum
                },
                success:function( r ){
                    if( r.code == 200 ){
                        console.log("r.code==200")
                        //直接使用 questions，会当成 js 中的全局变量。
                        //当返回结果改成 PageInfo时，data 是 PageInfo对象。
                        // PageInfo 对象当中包含了当前页的问题列表 list
                        //questionApp.questions = r.data

                        questionApp.pageInfo = r.data
                        console.log("--------接收到的 pageInfo  start--------")
                        console.log( questionApp.pageInfo )
                        console.log("--------接收到的 pageInfo  end--------")
                        // list 就是封装在 PageInfo 对象中的问题列表。
                        questionApp.questions = r.data.list ;
                        //在请求问题列表后，马上对创建时间属性进行修改。
                        questionApp.updateDuration();
                        questionApp.updateImage();
                    }
                }
            });
        }
    },
    //钩子函数的名字，不能写错 ！
    created:function(){
        this.loadQuestions();
    }
    //页面加载完成后，自动执行 created()方法，调用 loadQuestion(), 调用 $.ajax() 发送异步请求
});